<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="utf-8">
    <title>百度网盘同步助手</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" media="all" th:href="@{/layuiadmin/layui/css/layui.css}">
    <link rel="stylesheet" media="all" th:href="@{/layuiadmin/style/admin.css}">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <span id="path"></span>
                    <table class="layui-hide" id="test-table-demoEvent" lay-filter="test-table-demoEvent"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['jquery', 'table'], function(){
        let $ = layui.jquery
            table = layui.table;
        $.ajax({
            url : '/baidu/pan/rest/2.0/xpan/file/getListData',
            type : 'get',
            dataType : 'json',
            success : function(data) {
                console.log(data)
            }
        });

        table.render({
            elem: '#test-table-demoEvent'
            ,height: 613
            ,url: '/baidu/pan/rest/2.0/xpan/file/getListData'
            ,cols: [ [
                {field:'isdir', width: '86', title: '是否为目录', templet: (d) => {
                        // 0 文件、1 目录
                        switch (d.isdir) {
                            case '0':
                                return '文件';
                            case '1':
                                return '目录';
                        }
                    }
                }
                ,{field:'category', width: '86', title: '文件类型', templet: (d) => {
                        // 1 视频、2 音频、3 图片、4 文档、5 应用、6 其他、7 种子
                        switch (d.category) {
                            case '1':
                                return '视频';
                            case '2':
                                return '音频';
                            case '3':
                                return '图片';
                            case '4':
                                return '文档';
                            case '5':
                                return '应用';
                            case '6':
                                return '其他';
                            case '7':
                                return '种子';
                        }
                    }
                }
                ,{field:'server_filename', width: '85%', title: '文件名称', event: 'path', style:'cursor: pointer;', templet: (d) => {
                        return `${d.server_filename}<br>${d.local_ctime} fffff`
                    }
                }
            ] ]
        });

        //监听单元格事件
        table.on('tool(test-table-demoEvent)', function(obj){
            let data = obj.data;
            $('#path').text(data.path)
            if(obj.event === 'path'){
                table.reload('test-table-demoEvent', {
                    where: {
                        dir: data.path
                    }
                })
            }
        });

    });
</script>
</body>
</html>